<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>海贷产品</title>
    <link rel="stylesheet" href="../../css/weui.css">
    <link rel="stylesheet" href="../../css/amazeui.css">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body,
    html {
        width: 100%;
        height: 100%;
        background: #f0f0f0;
    }

    body {
        /* background-image: url('../../images/申请条件2.png'); */
        background-size: 100% 100%;
        background-position: 0 0;

    }

    header {
        text-align: center;
        height: 44px;
        line-height: 44px;
        border-bottom: 0.5px solid #bbbbbb;
        position: relative;
    }

    .posti:nth-child(n) {
        padding: 10px;
    }

    .jinqian {
        padding: 10px;
    }

    .button {
        width: 76%;
        font-size: 14px;
        color: #fff;
        padding: 10px;
        outline: none;
        border: none;
        margin: 0 auto;
        display: block;
        width: 90%;
        margin: 30px auto;
        display: block;
        outline: none;
        background: #1197ff;
        border-radius: 5px;
        height: 40px;
        /* position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%); */
    }

    .am-input-group-label {
        border: none;
        background: rgba(0, 0, 0, 0);
    }

    .am-form-field {
        border: none;
        background: rgba(0, 0, 0, 0);
    }

    .am-form-field>img {
        width: 100%;
    }

    .am-input-group .am-form-field,
    .am-input-group-btn>.am-btn {
        height: auto;
    }

    .banner {
        width: 100%;
        background-image: url('../../images/bg.png');
        background-size: cover;
        height: 205px;
        background-position: 0;
        background-repeat: no-repeat;
        color: #fff;
        position: relative;
        overflow: hidden;
    }

    .title {
        text-align: center;
        font-size: 20px;
        margin: 10px;
    }

    .maxjine {
        text-align: center;
        position: absolute;
        top: 39%;
        transform: translateY(-50%);
        width: 100%;
        font-size: 45px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .guige {
        position: absolute;
        width: 100%;
        top: 80%;
        white-space:nowrap; 
        transform: translateY(-50%);
    }

    .guige>div {
        display: inline-block;
        text-align: center;
        width: 24%;
        font-size: 14px;
    }

    p {
        margin: 0;
    }

    .guige>div p:first-child {
        border-right: 1px solid #bbbbbb;
    }

    .guige>div p:last-child {
        margin-top: 10px;
    }

    .boxx {
        margin-top: 5px;
        background: #fff;
        padding: 10px 0;
    }

    .boxx_listbox {
        padding: 0 15px;
        font-size: 0;
        margin-bottom: 10px;
    }

    .boxx_listbox>img {
        width: 23px;
        display: inline-block;
        vertical-align: top;
    }

    .boxx_list {
        font-size: 14px;
        padding-left: 10px;
        width: calc(100% - 30px);
        display: inline-block;
        vertical-align: top;
    }

    .content {
        font-size: 13px;
        color: #cccccc;
    }

    .fixd {
        width: 80%;
        height: 80%;
        position: fixed;
        top: 50%;
        left: 50%;
        background-color: #028beb;
        z-index: 10000;
        transform: translate(-50%, -50%);
        overflow-x:hidden;
        display: none;
        color: #fff;
        border-radius: 10px;
    }

    .body>.boxx,.body>.banner,.body>.button{
        filter: blur(10px)
    }
    .mask{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background-color: rgba(0,0,0,0);
        display: none;
        z-index: 1000;
    }
    .body>.mask,.body>.fixd{
        display: block
    }
    .fixd_list{
        line-height: 30px;
        text-align: center;
        border-bottom: 1px solid #fff;
    }
</style>

<body>
    <div class="mask"></div>
    <div class="fixd">
    </div>
    <div class="banner">
        <div class="title">海贷产品</div>
        <div class="maxjine LoanAmountMax">
            ￥300000
        </div>
        <div class="guige">
            <div>
                <p>贷款期限</p>
                <p><span class="LoanTimeMin"></span>-<span class="LoanTimeMax"></span>月</p>
            </div>
            <div>
                <p>费率</p>
                <p><span class="RateMin"></span>%-<span class="RateMax"></span>%</p>
            </div>
            <div>
                <p>年龄</p>
                <p><span class="AgeMin"></span>-<span class="AgeMax"></span>周岁</p>
            </div>
            <div>
                <p style="border:none">区域</p>
                <p><span class="chakan">查看</span></p>
            </div>
        </div>
    </div>
    <div class="boxx">
        <div class="boxx_listbox">
            <img src="../../images/daikuaned.png" alt="">
            <div class="boxx_list">
                <div class="boxx_list_title">
                    贷款额度
                </div>
                <div class="content">
                    最高 &nbsp;&nbsp; <span class="LoanAmountMax"></span><br>
                    最低 &nbsp;&nbsp; <span class="LoanAmountMin"></span>
                </div>
            </div>
        </div>
        <div class="boxx_listbox">
            <img src="../../images/gongsi.png" alt="">
            <div class="boxx_list">
                <div class="boxx_list_title">
                    房产类型
                </div>
                <div class="content">
                    <span class="HourseType">商品房 商品房 商品房 商品房</span>
                </div>
            </div>
        </div>
        <div class="boxx_listbox">
            <img src="../../images/fangzi.png" alt="">
            <div class="boxx_list">
                <div class="boxx_list_title">
                    房龄
                </div>
                <div class="content">
                    <span class="HousrAge"></span>年
                </div>
            </div>
        </div>
        <div class="boxx_listbox">
            <img src="../../images/ziliao.png" alt="">
            <div class="boxx_list">
                <div class="boxx_list_title">
                    所需资料
                </div>
                <div class="content">
                    <div class="RequiredData"></div>
                </div>
            </div>
        </div>
        <div class="boxx_listbox">
            <img src="../../images/liucheng.png" alt="">
            <div class="boxx_list">
                <div class="boxx_list_title">
                    贷款流程
                </div>
                <div class="content">
                    <div class="RequiredData"></div>
                </div>
            </div>
        </div>
    </div>
    <button class="button">立即申请</button>
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    <script>
        var http = localStorage.getItem('http')
        var UserId = localStorage.getItem('UserId')
        var Access_token = localStorage.getItem('Access_token')
        var Refresh_token = localStorage.getItem('Refresh_token');
        $.ajax({
            type: 'GET',
            headers: {
                "Authorize": Access_token + '|' + Refresh_token,
                "MemberId": UserId
            },
            url: http + '/api/product/GetProductInfo',
            data: {
                keyValue: GetQueryString('id')
            },
            dataType: "json",
            async: false,
            contentType: 'json',
            success: function (data) {
                console.log(JSON.stringify(data));
                if (data.type == 1) {
                    var LoanAmountMin = data.resultdata.LoanAmountMin;
                    var LoanAmountMax = data.resultdata.LoanAmountMax;
                    var LoanTimeMin = data.resultdata.LoanTimeMin;
                    var LoanTimeMax = data.resultdata.LoanTimeMax;
                    var RateMin = data.resultdata.RateMin;
                    if (data.resultdata.HourseType == 0) {
                        HourseType = '商品房'
                    }
                    if (data.resultdata.HourseType == 1) {
                        HourseType = '公寓'
                    }
                    if (data.resultdata.HourseType == 2) {
                        HourseType = '别墅'
                    }
                    if (data.resultdata.HourseType == 3) {
                        HourseType = '成本价'
                    }
                    if (data.resultdata.HourseType == 4) {
                        HourseType = '回迁房'
                    }
                    if (data.resultdata.HourseType == 5) {
                        HourseType = '经济适用房'
                    }
                    if (data.resultdata.HourseType == 6) {
                        HourseType = '按经济适用房管理'
                    }
                    if (data.resultdata.HourseType == 7) {
                        HourseType = '央产房'
                    }
                    $('.HourseType').text(HourseType);
                    $('.Name').text(data.resultdata.Name);
                    $('.Sort').text(data.resultdata.Sort);
                    $('.Image').find('img').attr('src', data.resultdata.Image);
                    $('.Cities').text(data.resultdata.Cities);
                    $('.LoanProcess').text(data.resultdata.LoanProcess)
                    $('.RequiredData').text(data.resultdata.RequiredData);
                    $('.LoanAmountMin').text('￥' + data.resultdata.LoanAmountMin);
                    $('.LoanAmountMax').text('￥' + data.resultdata.LoanAmountMax);
                    $('.LoanTimeMin').text(data.resultdata.LoanTimeMin);
                    $('.LoanTimeMax').text(data.resultdata.LoanTimeMax);
                    $('.RateMin').text(data.resultdata.RateMin);
                    $('.RateMax').text(data.resultdata.RateMax);
                    $('.HousrAge').text(data.resultdata.HousrAge);
                    $('.AgeMin').text(data.resultdata.AgeMin);
                    $('.AgeMax').text(data.resultdata.AgeMax);
                    keyValue = data.resultdata.Cities
                    var kv = keyValue.split(',')
                    for (var i = 0; i < kv.length; i++) {
                        $.ajax({
                            type: 'GET',
                            headers: {
                                "Authorize": Access_token + '|' + Refresh_token,
                                "MemberId": UserId
                            },
                            url: http + '/api/product/GetCity',
                            data: {
                                keyValue: kv[i]
                            },
                            dataType: "json",
                            contentType: 'json',
                            success: function (data) {
                                console.log(JSON.stringify(data));
                                if (data.type == 1) {
                                    $('.fixd').append(`<div class="fixd_list">${data.resultdata.CityName}</div>`)
                                }
                            },
                            error: function (err) {
                                console.log(JSON.stringify(err));
                            }
                        })
                    }
                }


            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        })
        
        $('.chakan').click(function(){
            $('body').toggleClass('body')
        })
        $('.mask').click(function(){
            $('body').toggleClass('body')
        })
        
        $('.button').click(function () {
            window.location.href = './pinggu.html?id=' + GetQueryString('id');

        })

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
    </script>
</body>

</html>